<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- <div class="div">{{msg}}</div> -->
        <!-- <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul> -->
        <!-- <button @click="msg = '更新'">修改数据</button> -->
        <!-- <ul>
            <li v-for="item in arr2">{{item.name}}</li>
        </ul>
        <button @click="changeArr">修改数据</button> -->
        <button @click="com = 'name1'">显示组件一</button><button @click="com = 'name2'">显示组件二</button>
        <!-- component 动态组件 is属性绑定的时当前需要使用的组件 -->
        <!-- <keep-alive>
            <component :is="com"></component>
        </keep-alive> -->
        <component :is="com"></component>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const com1 = {
            template: `
                <div>这是组件一的内容</div>
            `,
            created() {
                console.log('组件一创建了');
            },
            activated() {
                console.log('组件一激活了')
            },
            deactivated() {
                console.log('组件一失活了')
            },
            beforeDestroy() {
                console.log('组件一销毁之前')
            },
            destroyed() {
                console.log('组件一销毁之后')
            },
        }
        const com2 = {
            template: `
                <div>这是组件二的内容</div>
            `,
            created() {
                console.log('组件二创建了');
            },
            activated() {
                console.log('组件二激活了')
            },
            deactivated() {
                console.log('组件二失活了')
            },
            beforeDestroy() {
                console.log('组件二销毁之前')
            },
            destroyed() {
                console.log('组件二销毁之后')
            },
        }
        new Vue({
            components: {
                name1: com1,
                name2: com2
            },
            data: {
                msg: 'hello world',
                arr: [1, 2, 3],
                arr2: [{
                    name: '张三'
                }, {
                    name: '李四'
                }, {
                    name: '王五'
                }],
                com: 'name1'
            },
            beforeCreate() { // vue组件实例对象已经创建完毕但是 data methods里面的内容还没有准备好
                console.log(this.msg);
            },
            created() { // dom创建完毕 且data和methods等方法都可以使用了 这个时候还没有真实dom 所以无法获取dom对象
                console.log(this.msg);
                let el = document.querySelector('.div')
                    // console.log(el);
            },
            beforeMount() { // dom创建完毕 且data和methods等方法都可以使用了 这个时候还没有真实dom 所以无法获取dom对象

            },
            mounted() { // 这时候真实dom已经渲染完毕 可以获取dom对象

            },
            methods: {
                changeArr() {
                    // this.arr = [3, 4, 5]
                    // console.log(this.arr);
                    this.arr2[0].name = '赵六'
                }
            },
            beforeUpdate() { // 当数据更新导致的dom更新或者打补丁之前触发的生命周期
                // console.log('更新之前')
            },
            updated() { // 当数据更新导致的dom更新或者打补丁之后触发的生命周期
                // console.log('更新之后')
            },
            // 这两个生命周期是当使用keep-alive之后才会生效 
            activated() { // 组件激活时触发的生命周期

            },
            deactivated() { // 组件失活时触发的生命周期

            },
            beforeDestroy() {

            },
            destroyed() {

            },
            errorCaptured: (err, vm, info) => {

            },
        }).$mount('#app')
    </script>
</body>

</html>